<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点与悬停与仿B站</title>
</head>
<body>
    <div class="demo01">
    <h1>焦点</h1>
    <input type="text" class="demo02"><br>
    
    <input type="text" class="demo03"><br>
    <h1>悬停</h1>
     <div class="demo04"></div> <br>
     <h1>仿B站效果</h1>
    
     <div class="demo05">
        <img src="遥远图.jpg" alt="">
        <div class="demo06">
<a href="http://www.bilibili.com" target="_blank" rel="noopener noreferrer" style="color: #fff;text-decoration: none;">
    <h2>遥远的她</h2>
<p>远方的她，正无语凝眸，望眼欲穿。。。</p></a>
<a href="#" class="demo07"></a>

        </div>
     </div>
</div>
<style>
    .demo01 {
        width: 60%;
        height: 80%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        padding: 1%;
    }
    .demo02 {
        width: 40%;
        height: 5%;
        outline: none;
        border: brown 2px solid;
        background: #fff;
        box-shadow: 0 0 15px 3px rgba(0, 0, 0, .2);
        font-size: 2rem;
        transition: .3s;
        border-radius: 10px;
    }
    .demo03 {
        width: 40%;
            height: 5%;
            outline: none;
            border-radius: 10px;
            border: brown 2px solid;
            background: white;
            box-shadow: 0 0 15px 3px rgba(0, 0, 0, 0.1);
            font-size: 2rem;
            transition: .3s;
    }
    .demo02:focus {
        background: rgb(220, 204, 21);
            border: #0a4f2d 2px solid;
    }
    .demo03:focus {
background: rgb(220, 204, 21);
            border: #0a4f2d 2px solid;
            transform: translateX(10%) scale(1.3)
    }
    .demo04 {
        width: 80%;
            height: 60%;
            background:url(悬停图.jpg);
            transition: 0.3s;
            background-repeat: no-repeat;
    }
    .demo04:hover {
        box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.2);
            width: 100%;
            height: 100%;
            transform: translateX(13%) scale(1.3);
    }
    .demo05 {
         width: 100%;
            position: relative;
            overflow: hidden;
    }
    .demo05:hover .demo06 {
        bottom: 0;
    }
    .demo06 {
        color: white;
            font-size: 20px;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            position: absolute;
            bottom: -100%;
            transition: .5s;
            background-color: rgba(0, 0, 0, 0.5);
    }
    .demo05 img {
        width: 100%;
    }
    .demo07 {
         opacity: 0;
            position: absolute;
            width: 56px;
            height: 56px;
            right: 10%;
            bottom: 10%;
            background: url(播放.png) no-repeat center center;
            transition: opacity .5s ease-in-out .5s;
    }
     .demo05:hover .demo07{
            opacity: 1;
        }
   
    </style>
</body>
</html>